<template>
    <div>
        <!-- 面包屑 -->
        <el-bread></el-bread>
        <el-button type="primary" plain class="btn" @click="add">添加</el-button>
        <list @edit="edit" ></list>
        <dia-log ref="userRef" :isShow="isShow" :isAdd="isAdd" @cancel="cancel"></dia-log>
    </div>
</template>
<script>
// 引入弹窗
import diaLog from './dialog.vue'
// 引入表格
import list from './list.vue';
export default {
    data() {
        return {
            isShow: false,//弹窗状态值
            isAdd: true,//是否为添加
        }
    },
    methods: {
        // 弹出弹窗
        add() {
            this.isShow = true;
            this.isAdd = true;
        },
        // 关闭弹窗
        cancel() {
            this.isShow = false;
        },
        // 编辑
        edit(uid){
            this.isShow = true;
            this.isAdd = false;
            this.$refs.userRef.userInfo(uid);
        }
    },
    mounted() {
        // 进入页面就获取角色列表
        // 优化  如果获取角色列表 就不在获取
        if (this.$store.getters['role/getRoleList'].length==0) {
            this.$store.dispatch('role/getRoleListActions')

        }
    },
    watch: {},
    computed: {},
    filters: {},
    components: {
        diaLog, list
    },
}
</script>
<style scoped>
.btn {
    margin: 20px 0 10px;
}
</style>